import React from "react";
import {Button,Cascader,Form,Input,InputNumber,Select} from "antd";
const { TextArea } = Input;

const BailIssue = () => {
  return (
    <div>
      <Form
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 14,
        }}
        layout="horizontal"
        style={{
          maxWidth: 600,
        }}
      >
        <Form.Item label="需求标题">
          <Input />
        </Form.Item>
        <Form.Item label="年龄要求">
          <InputNumber min={25}/><span>-</span>
          <InputNumber min={25} max={50} />
        </Form.Item>
        <Form.Item label="性别要求">
          <Select>
            <Select.Option value="男">男</Select.Option>
            <Select.Option value="女">女</Select.Option>
            <Select.Option value="男女不限">男女不限</Select.Option>
          </Select>
        </Form.Item>
        
        <Form.Item label="开始时间">
          <Input/>
        </Form.Item>
        <Form.Item label="结束时间">
          <Input/>
        </Form.Item>        
        <Form.Item label="需求类型">
          <Cascader
            options={[
              {
                value: "家政",
                label: "家政",
                children: [
                  {
                    value: "保姆",
                    label: "保姆",
                  },
                  {
                    value: "保洁",
                    label: "保洁",
                  },
                ],
              },
              {
                value: "陪护",
                label: "陪护",
                children: [
                  {
                    value: "老人陪护",
                    label: "老人陪护",
                  },
                  {
                    value: "护工陪护",
                    label: "护工陪护",
                  },
                ],
              },
            ]}
          />
        </Form.Item>
        <Form.Item label="详细需求">
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item style={{ textAlign: "right" }}>
          <Button>提交</Button>
        </Form.Item>
      </Form>
    </div>
  );
};
export default BailIssue;
